<template>
    <el-container>
        <el-header class="header-tabs">
            <el-tabs type="card" v-model="groupId" @tab-change="tabChange">
				<el-tab-pane label="全部" name=""></el-tab-pane>
				<el-tab-pane label="打版中" name="1"></el-tab-pane>
				<el-tab-pane label="审版中" name="3"></el-tab-pane>
				<el-tab-pane label="修版中" name="4"></el-tab-pane>
				<el-tab-pane label="已通过" name="5"></el-tab-pane>
                <el-tab-pane label="待下单" name="6"></el-tab-pane>
				<el-tab-pane label="已下单" name="7"></el-tab-pane>
				<el-tab-pane label="已取消" name="9"></el-tab-pane>
			</el-tabs>
        </el-header>
        <el-header>
            <div class="left-panel">
                <div class="right-panel-search">
                    <div class="search-input">工厂</div>
                    <el-select v-model="search.supplier_id"  filterable placeholder="请选择工厂" clearable>
                        <el-option v-for="item in gongList" :key="item.apply_id" :label="item.apply_name" :value="item.apply_id"/>
                    </el-select>
                    <div class="search-input">客户</div>
                    <el-select v-model="search.custom_id"  filterable placeholder="请选择客户" clearable>
                        <el-option v-for="item in keHuList" :key="item.custom_id" :label="item.apply_name" :value="item.custom_id"/>
                    </el-select>
                    <div class="search-input">版单编号</div>
                    <el-input v-model="search.order_no" placeholder="请输入版单编号" clearable @change="handleKeyDown"/>
                    <el-input v-model="search.keyword" placeholder="请输入工厂货号/SKC/码数" clearable @change="handleKeyDown"/>
                    <el-button type="primary" icon="el-icon-search" @click="upsearch">搜索</el-button>
                    <el-button type="primary" @click="printAll" :disabled="selection.length == 0">批量打印版单</el-button>
                </div>
            </div>
        </el-header>
        <el-main class="nopadding">
            <scTable ref="table" :apiObj="apiObj" @selection-change="selectionChange" stripe remoteSort remoteFilter border :params="query">
                <el-table-column type="selection" width="50"></el-table-column>
                <el-table-column label="版单编号" prop="order_no" align="center" width="150"></el-table-column>
                <el-table-column label="商品信息" prop="goods" align="center" width="300">
                    <template #default="scope">
                        <div class="shopInfo">
                            <el-image class="img" :src="scope.row.images[0]" :preview-src-list="scope.row.images" :initial-index="0" fit="cover" preview-teleported="true" hide-on-click-modal />
                            <div class="right">
                                <div>工厂货号：{{scope.row.goods.factory_art_no}}</div>
                                <div>样衣尺码：{{scope.row.goods.size}}</div>
                                <div>SKC：{{scope.row.goods.skc}}</div>
                                <div>客户：{{scope.row.goods.custom_name}}</div>
                                <div v-if="scope.row.goods">商品品牌：{{scope.row.goods.brand_name}}</div>
                            </div>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column label="员工" prop="staff_name" align="center">
                    <template #default="scope">
                        <div>吓数: {{scope.row.staff_list.xiashu_name}}</div>
                        <div>画花: {{scope.row.staff_list.huahua_name}}</div>
                        <div>打版: {{scope.row.staff_list.daban_name}}</div>
                        <div>缝版: {{scope.row.staff_list.fengban_name}}</div>
                    </template>
                </el-table-column>
                <el-table-column label="打板交期" prop="deliver_date" align="center" width="150">
                    <template #default="scope">
                        <div>{{scope.row.deliver_date}}</div>
                        <div class="day">
                            <!-- <div style="color:#67c23a">剩{{scope.row.has_day}}天</div>
                            <div style="color:red;margin-left:10px">超{{scope.row.extra_day}}天</div> -->
                            <div v-if="scope.row.has_day>0" style="color:#67c23a">剩{{scope.row.has_day}}天</div>
                            <div v-else style="color:red;margin-left:10px">超{{scope.row.extra_day}}天</div>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column label="打板要求" prop="ask" align="center">
                    <template #default="scope">
                        <el-popover placement="top-start" :width="200" trigger="hover" :content="scope.row.ask" >
                        <template #reference>
                            <el-button style="padding: 5px 0;" text class="m-2">{{scope.row.ask.substring(0, 15)}}</el-button>
                        </template>
                        </el-popover>
                    </template>
                </el-table-column>
                <el-table-column label="毛料" prop="num" align="center" width="150">
                    <template #default="scope">
                        <div class="column">
                            <div v-for="(item,index) in scope.row.marterial" :key="index">{{item.material_name}}</div>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column label="色号" prop="num" align="center" width="100">
                    <template #default="scope">
                        <div class="column">
                            <div v-for="(item,index) in scope.row.marterial" :key="index">{{item.material.color_number}}</div>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column label="颜色" prop="num" align="center" width="100">
                    <template #default="scope">
                        <div class="column">
                            <div v-for="(item,index) in scope.row.marterial" :key="index">{{item.material.colour}}</div>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column label="版次" prop="num" align="center" width="100"></el-table-column>
                <!-- <el-table-column label="工厂报价" prop="factory_quote" align="center" width="150"></el-table-column> -->
                <!-- <el-table-column label="下单核价" prop="order_pricing" align="center" width="150"></el-table-column> -->
                <el-table-column label="版单状态" prop="status" align="center" width="100">
                    <template #default="scope">
                        <el-tag v-if="scope.row.status==1" type="primary">打版中</el-tag>
                        <el-tag v-if="scope.row.status==3" type="info">审版中</el-tag>
                        <el-tag v-if="scope.row.status==4" type="info">修版中</el-tag>
                        <el-tag v-if="scope.row.status==2" type="warning">待签收</el-tag>
                        <el-tag v-if="scope.row.status==5" type="success">已完成</el-tag>
                        <el-tag v-if="scope.row.status==6" type="success">待下单</el-tag>
                        <el-tag v-if="scope.row.status==7" type="success">已下单</el-tag>
                        <el-tag v-if="scope.row.status==9" type="danger">已取消</el-tag>
                    </template>
                </el-table-column>
                <el-table-column label="操作" fixed="right" align="center" width="120" v-if="groupId != 3 && groupId != 5 &&  groupId != 6 &&  groupId != 7 &&  groupId != 9">
                    <template #default="scope">
                        <el-button-group style="display:flex;flex-direction:column">
                            <div v-if="edList">
                                <sc-status-indicator type="danger" v-if="scope.row.is_print == 0"></sc-status-indicator>
                                <el-button text type="primary" size="small" @click="print(scope.row, scope.$index)" v-auth="'edList.print'">打印版单</el-button>
                            </div>
                            <el-button text type="primary" size="small" @click="complete(scope.row, scope.$index)" v-auth="'edList.finish'">完成打板</el-button>
                            <el-button text type="primary" size="small" @click="process(scope.row, scope.$index)" v-auth="'edList.process'">本厂工序</el-button>
                            <el-button text type="primary" size="small" @click="report(scope.row, scope.$index)" v-auth="'edList.report'">录入报工</el-button>
                            <el-button text type="primary" size="small" @click="create(scope.row, scope.$index)" v-auth="'edList.create'">下版料采购单</el-button>
                        </el-button-group>
                    </template>
                </el-table-column>
            </scTable>
        </el-main>
    </el-container>
    <save v-if="dialog.save" ref="saveDialog" @success="handleSuccess" @closed="dialog.save = false" draggable></save>
    <edit v-if="dialog.edit" ref="editDialog" @success="handleSuccess" @closed="dialog.edit = false" draggable></edit>
    <report v-if="dialog.report" ref="reportDialog" @success="handleSuccess" @closed="dialog.report = false" draggable></report>
    <print ref="pitDialog"></print>
    <purchase v-if="dialog.order" ref="orderDialog" @success="handleSuccess" @closed="dialog.order = false" draggable></purchase>
    <print-edlition v-if="dialog.print" ref="printDialog" @success="handleSuccess" @closed="dialog.print = false" draggable></print-edlition>
</template>

<script>
import Print from '@/views/develop/edition/list/print.vue';
import Edit from '../../develop/edition/list/save.vue';
import Report from './report';
import save from './save';
import Purchase from './purchase.vue';
import PrintEdlition from '@/views/develop/edition/list/printEdlition.vue';
export default {
  components: { save,Edit, Report, Print, Purchase, PrintEdlition },
	name: 'user',
	data() {
		return {
			dialog: {
				save: false,
				edit: false,
                report:false,
                pit:false,
                order:false,
                print:false,
			},
			apiObj: this.$API.develop.edition.lists,
            query:{
                status:"",
                is_local:1,
            },
			search: {
                supplier_id: null,
				custom_id: null,
                order_no: null,
                design_num: null,
                keyword: null
			},
            selection: [],
			gongList: [],//供应商
			keHuList: [],//客户
            groupId: "-1",
            edList:this.$TOOL.data.get("PERMISSIONS").includes('edList.print'),
		}
	},
	mounted() {
        this.getGong()
        this.getKehu()
	},
	methods: {
        // 完成
        complete(row) {
			this.dialog.save = true;
			this.$nextTick(() => {
				this.$refs.saveDialog.open("over").setData(row);
			});
		},
        // 打印
        async print(row){
            var reqData = { ids: row.id };
            var res = await this.$API.print.editionPrintAll.get(reqData);
			if (res.code == 1) {
                this.dialog.print = true;
                setTimeout(()=>{
                    this.$refs.printDialog.open("edit").setData(res.data.template_data);
                },500)
			} else {
				this.$alert(res.message, "提示", { type: "error" });
			}
        },
        // 批量打印
        async printAll(){
            let ids = []
            this.selection.map(item=>{
                ids.push(item.id)
            })
            var reqData = { ids:ids };
            var res = await this.$API.print.editionPrintAll.get(reqData);
            if (res.code == 1) {
                // this.$refs.pitDialog.init(res.data);
                this.dialog.print = true;
                setTimeout(()=>{
                    this.$refs.printDialog.open("add").setData(res.data.template_data);
                },500)
            } else {
                this.$alert(res.message, "提示", { type: "error" });
            }
        },
        // 报工
        report(row) {
            this.dialog.report = true;
			this.$nextTick(() => {
                this.$refs.reportDialog.open("add").setData(row);
			});
		},
        // 本厂工序
        process(row){
            this.dialog.report = true;
			this.$nextTick(() => {
                this.$refs.reportDialog.open("edit").setData(row);
			});
        },
        create(row){
            this.dialog.order = true;
			this.$nextTick(() => {
				this.$refs.orderDialog.open("edit").setData(row);
			});
        },
		//搜索
		upsearch() {
			this.$refs.table.upData(this.search)
		},
        handleSuccess(data, mode) {
			if (mode == 'over') {
				this.$refs.table.refresh()
			} else if (mode == 'edit') {
				this.$refs.table.refresh()
			} else if (mode == 'set') {
				this.$refs.table.refresh()
			}
		},
        // 获取工厂
        async getGong(){
            var res = await this.$API.all.Apply.get({type:1});
            this.gongList = res.data;
        },
        // 获取客户
        async getKehu(){
            var res = await this.$API.all.customer.get();
            this.keHuList = res.data;
        },
        selectionChange(selection){
            this.selection = selection;
        },
        // tab切换
        tabChange(e){
            this.groupId = e
            this.query.status = e
            this.$refs.table.refresh()
            this.search.supplier_id = ''
            this.search.custom_id = ''
            this.search.order_no = ''
            this.search.keyword = ''
        },
        handleKeyDown() {
            this.upsearch()
        },
	}
}
</script>

<style lang="scss">
.search-input {
	width: auto;
	font-size: 14px;
}
.column{
    height:100px;
    overflow:auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
</style>
